<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">



  
  
    
    
  <script src="/lib/pace/pace.min.js?v=1.0.2"></script>
  <link href="/lib/pace/pace-theme-minimal.min.css?v=1.0.2" rel="stylesheet">







<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.ico?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.ico?v=5.1.4">


  <link rel="mask-icon" href="/images/facicon.ico?v=5.1.4" color="#222">





  <meta name="keywords" content="HTML,">





  <link rel="alternate" href="/atom.xml" title="Key" type="application/atom+xml">






<meta name="description" content="浏览器和服务器相关概念HTML文档结构HTML基础标签 关于浏览器和服务器浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件.国内网民常用的网页浏览器有:QQ浏览器.Internet Explorer.Firefox.safari.Opera.Google Chorme.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.">
<meta name="keywords" content="HTML">
<meta property="og:type" content="article">
<meta property="og:title" content="HTML基础">
<meta property="og:url" content="https://blog.qipo.net/2017/08/14/HTML_base/index.html">
<meta property="og:site_name" content="Key">
<meta property="og:description" content="浏览器和服务器相关概念HTML文档结构HTML基础标签 关于浏览器和服务器浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件.国内网民常用的网页浏览器有:QQ浏览器.Internet Explorer.Firefox.safari.Opera.Google Chorme.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://assets.qipo.net/timg%20%281%29.jpg">
<meta property="og:image" content="http://assets.qipo.net/server2.jpg">
<meta property="og:image" content="http://assets.qipo.net/html5.jpg">
<meta property="og:image" content="http://assets.qipo.net/2017-08-14%2019-41-36%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png">
<meta property="og:image" content="http://asssets.qipo.net/2017-08-14%2021-22-22%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png">
<meta property="og:image" content="http://assets.qipo.net/table.jpg">
<meta property="og:image" content="http://assets.qipo.net/th.png">
<meta property="og:image" content="http://assets.qipo.net/2017-08-15%2019-13-36%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png">
<meta property="og:updated_time" content="2020-06-04T08:25:51.014Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="HTML基础">
<meta name="twitter:description" content="浏览器和服务器相关概念HTML文档结构HTML基础标签 关于浏览器和服务器浏览器浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件.国内网民常用的网页浏览器有:QQ浏览器.Internet Explorer.Firefox.safari.Opera.Google Chorme.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.">
<meta name="twitter:image" content="http://assets.qipo.net/timg%20%281%29.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://blog.qipo.net/2017/08/14/HTML_base/">





  <title>HTML基础 | Key</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Key</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br>
            
            关于
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br>
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://blog.qipo.net/2017/08/14/HTML_base/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Key">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Key">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">HTML基础</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-08-14T08:16:54+08:00">
                2017-08-14
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/HTML/" itemprop="url" rel="index">
                    <span itemprop="name">HTML</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  3.6k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  14
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>浏览器和服务器相关概念<br>HTML文档结构<br>HTML基础标签</p>
<h3 id="关于浏览器和服务器"><a href="#关于浏览器和服务器" class="headerlink" title="关于浏览器和服务器"></a>关于浏览器和服务器</h3><h4 id="浏览器"><a href="#浏览器" class="headerlink" title="浏览器"></a>浏览器</h4><p>浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,并让用户与这些文件交互的一种软件.国内网民常用的网页浏览器有:QQ浏览器.Internet Explorer.Firefox.safari.Opera.Google Chorme.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器等,浏览器是最常使用的客户端程序.</p>
<p><a href="https://juejin.im/entry/57ff3cea0e3dd90057e5f25e" target="_blank" rel="noopener">浏览器内核介绍</a></p>
<h4 id="服务器"><a href="#服务器" class="headerlink" title="服务器"></a>服务器</h4><p>服务器,也称伺服器,是提供计算服务的设备.由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力.服务器的构成包括处理器.硬盘.内存.系统总线等,和通用的计算机架构类似,但是由于需要提供高可靠性的服务,因此在处理能力.稳定性.可靠性.安全性.可扩展性.可管理性等方面要求比较高.在网络环境下,根据服务器提供的服务类型不同,分为文件服务器,数据库服务器,WEB服务器等</p>
<p><img src="http://assets.qipo.net/timg%20%281%29.jpg" alt></p>
<h4 id="浏览器与服务器之间的关系"><a href="#浏览器与服务器之间的关系" class="headerlink" title="浏览器与服务器之间的关系"></a>浏览器与服务器之间的关系</h4><p><img src="http://assets.qipo.net/server2.jpg" alt></p>
<h3 id="了解http协议"><a href="#了解http协议" class="headerlink" title="了解http协议"></a>了解http协议</h3><p>超文本传输协议(HTTP, HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有WWW文件必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接受HTML页面的方法.<br>HTTP是一个客户端和服务器端请求和应答的标准(TCP).客户端是终端用户,服务端是网站.通过使用Web浏览器.网络爬虫或者其他的工具,客户端发起一个到服务器上指定端口的(默认端口为80)的HTTP请求.<br>通过HTTP或者HTTPS协议请求到的资源由统一资源标示符(Uniform Resource ldentifiers)(或者,更准确一些,URLs)来标识.</p>
<h3 id="初步认识HTML"><a href="#初步认识HTML" class="headerlink" title="初步认识HTML"></a>初步认识HTML</h3><h4 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h4><p>超文本标记语言,标准通用标记语言下的一个应用.’超文本’是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素.主要用于描述文档的内容,无法描述文档的样式(类似与txt文本和word).</p>
<h4 id="后缀名"><a href="#后缀名" class="headerlink" title="后缀名"></a>后缀名</h4><p>HTML是一个网页文件的拓展名,和txt.jpg.mp3一样,是一个文件格式.<code>.html</code>文件就是网页文件.后缀名与文件之间是没有直接关系的.</p>
<ul>
<li>后缀名仅仅决定了文件的打开方式</li>
<li>真正决定文本类型的是文件的内容</li>
</ul>
<h3 id="HTML的发展"><a href="#HTML的发展" class="headerlink" title="HTML的发展"></a>HTML的发展</h3><ul>
<li>超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：</li>
<li>HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时</li>
<li>HTML 3.2——1997年1月14日，W3C推荐标准</li>
<li>HTML 4.0——1997年12月18日，W3C推荐标准</li>
<li>HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准</li>
<li>HTML 5——2014年10月28日，<a href="https://www.w3.org" target="_blank" rel="noopener">W3C</a>推荐标准</li>
</ul>
<p><img src="http://assets.qipo.net/html5.jpg" alt></p>
<h3 id="HTML结构"><a href="#HTML结构" class="headerlink" title="HTML结构"></a>HTML结构</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- DOCTYPE用于声明文档类型,告诉浏览器用什么标准去解析该页面!! --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- head用于对页面进行设置 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">'utf-8'</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>我的第一个界面<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- title设置浏览器标题栏显示的内容 --&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 这是注释!!</span></span><br><span class="line"><span class="comment">    body显示页面的内容</span></span><br><span class="line"><span class="comment">     --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="了解格式中每个标签的含义"><a href="#了解格式中每个标签的含义" class="headerlink" title="了解格式中每个标签的含义"></a>了解格式中每个标签的含义</h3><figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE&gt;</span>  文档类型说明</span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span><span class="tag">&lt;/<span class="name">html</span>&gt;</span> 整个文档页面</span><br><span class="line"><span class="tag">&lt;<span class="name">meta</span>&gt;</span> 设置页面的编码格式,关键字,以及页面的描述</span><br><span class="line"><span class="tag">&lt;<span class="name">title</span>&gt;</span><span class="tag">&lt;/<span class="name">title</span>&gt;</span> 标题部分</span><br><span class="line"><span class="tag">&lt;<span class="name">head</span>&gt;</span><span class="tag">&lt;/<span class="name">head</span>&gt;</span> 页面的头部分</span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span><span class="tag">&lt;/<span class="name">body</span>&gt;</span> 页面的主体部分</span><br></pre></td></tr></table></figure>
<h3 id="HTML基础标签"><a href="#HTML基础标签" class="headerlink" title="HTML基础标签"></a>HTML基础标签</h3><h4 id="HTML中的注释方式"><a href="#HTML中的注释方式" class="headerlink" title="HTML中的注释方式"></a>HTML中的注释方式</h4><p>在HTML中还有一种特殊的标记—注释标记.如果需要在HTML中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标记.<br>其基本语法格式如下:<code>&lt;!-- 我是注释 --&gt;</code></p>
<h3 id="常见标签学习"><a href="#常见标签学习" class="headerlink" title="常见标签学习"></a>常见标签学习</h3><p>|———-|———-|<br>|标签|格式|<br>|段落|p|<br>|标题|h1-h6|<br>|水平线|hr|<br>|换行|br|<br>|加粗|b/strong|<br>|倾斜|i/em|<br>|删除线|s/del|<br>|下划线|u/ins|<br>|原样显示|pre|</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">'utf-8'</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>HTML基础标签<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span>段落标签<span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">p</span>&gt;</span></span><br><span class="line">      你好,我是路人甲.<span class="tag">&lt;<span class="name">br</span>&gt;</span></span><br><span class="line">      你好,我是路人乙.</span><br><span class="line">    <span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>h1标签<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h2</span>&gt;</span>h2标签<span class="tag">&lt;/<span class="name">h2</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>h3标签<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h4</span>&gt;</span>h4标签<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h5</span>&gt;</span>h5标签<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">h6</span>&gt;</span>h6标签<span class="tag">&lt;/<span class="name">h6</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">hr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">b</span>&gt;</span>b加粗<span class="tag">&lt;/<span class="name">b</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">strong</span>&gt;</span>strong加粗<span class="tag">&lt;/<span class="name">strong</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">i</span>&gt;</span>i倾斜<span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">s</span>&gt;</span>s删除<span class="tag">&lt;/<span class="name">s</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">del</span>&gt;</span>del删除<span class="tag">&lt;/<span class="name">del</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">u</span>&gt;</span>u下滑线<span class="tag">&lt;/<span class="name">u</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ins</span>&gt;</span>ins下划线<span class="tag">&lt;/<span class="name">ins</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>显示如下:</p>
<p><img src="http://assets.qipo.net/2017-08-14%2019-41-36%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png" alt></p>
<p>从上面的实例可以看出,有些只一个标签,比如加粗有两个<code>b</code>和<code>strong</code>,这里推荐使用语义化标签即:<code>strong</code>.<br>语义化标签:是HTML未来的趋势,是为了让大家直观的认识到标签和属性的用途和作用.</p>
<h4 id="图像标签img"><a href="#图像标签img" class="headerlink" title="图像标签img"></a>图像标签img</h4><p>HTML网页中任何元素的实现都是要依靠HTML来标记的,要想在网页中显示图像就要使用图像标记.</p>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;img <span class="attribute">src</span>=<span class="string">'./img.jpg'</span> <span class="attribute">title</span>=<span class="string">'yyy'</span> <span class="attribute">alt</span>=<span class="string">'无法显示'</span>&gt;</span><br></pre></td></tr></table></figure>
<p>|——-|——–|<br>|属性|作用|<br>|title|图片的标题|<br>|src|图片的路径|<br>|alt|图片不正常显示时文本提示|</p>
<h4 id="创建超链接"><a href="#创建超链接" class="headerlink" title="创建超链接"></a>创建超链接</h4><p>在HTML中创建超链接非常简单,只需要用标记环绕需要被连接的对象即可,其基本语法格式如下:</p>
<figure class="highlight routeros"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a <span class="attribute">href</span>=<span class="string">"https:www.baidu.com"</span> <span class="attribute">target</span>=<span class="string">"_blank"</span>&gt;百度&lt;/a&gt;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>href: 用于指定链接目标的地址,当<a>标记应用<code>href</code>属性时,它就有了超链接的功能.<br>target: 用于指定链接页面的打开方式,其取值有<code>_self</code>和<code>_blank</code>两种,其中<code>_self</code>为默认值,<code>_blank</code>为在新窗口打开.</a></p>
</blockquote>
<h5 id="锚点链接"><a href="#锚点链接" class="headerlink" title="锚点链接"></a>锚点链接</h5><p>通过创建锚点链接,用户能够快速定位到目标内容.例如本页面的目录点击即可直接呈现内容.<br>创建锚点链接分为两步:</p>
<ul>
<li>使用<code>id</code>属性,比如:<code>&lt;p id=&quot;k&quot;&gt;目标文本&lt;/p&gt;</code></li>
<li>创建超链接指向该内容,比如:<code>&lt;a href=&quot;#k&quot;&gt;点击跳转到目标文本&lt;/a&gt;</code></li>
</ul>
<blockquote>
<p>需要注意的是:<br>a标签中指定的 #name ,此处的name是要跳到的位置的id值.<br>id属性值不要重复,必须保证在一个页面中唯一!!!</p>
</blockquote>
<h5 id="空链接跳转"><a href="#空链接跳转" class="headerlink" title="空链接跳转"></a>空链接跳转</h5><p>如果你还没想好该链接要跳转到什么地方,可以这样写:<br><code>&lt;a href=&quot;#&quot;&gt;空链接&lt;/a&gt;</code><br>但是你如果<code>href</code>什么都不写,浏览器是不会识别这是个链接的.</p>
<h3 id="HTML特殊字符"><a href="#HTML特殊字符" class="headerlink" title="HTML特殊字符"></a>HTML特殊字符</h3><p>HTML为这些特殊的字符专门准备了专门的替代代码</p>
<p>|———–|———|————|<br>|特殊字符|描述|字符代码|<br>| |空格符|<code>&amp;nbsp;</code>|<br>|&lt;|小于号|<code>&amp;lt;</code>|<br>|&gt;|大于号|<code>&amp;gt;</code>|<br>|&amp;|和号|<code>&amp;amp;</code>|<br>|¥|人民币|<code>&amp;yen;</code>|<br>|©|版权|<code>&amp;copy;</code>|<br>|®|注册商标|<code>&amp;reg;</code>|<br>|°|摄氏度|<code>&amp;deg;</code>|<br>|±|正负号|<code>&amp;plusmn;</code>|<br>|×|乘号|<code>&amp;times;</code>|<br>|÷|除号|<code>&amp;divide;</code>|<br>|²|平方|<code>&amp;sup2;</code>|<br>|³|立方|<code>&amp;sup3;</code>|</p>
<h3 id="列表"><a href="#列表" class="headerlink" title="列表"></a>列表</h3><p>任何不是描述性的文本的任何内容都可以认为是列表</p>
<h4 id="无序列表"><a href="#无序列表" class="headerlink" title="无序列表"></a>无序列表</h4><p>无序列表的各个列表项之间没有顺序级别之分,是并列的.其基本语法格式如下:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>无序列表1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>无序列表2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>无序列表3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>在上面的语法中,<code>&lt;ul&gt;&lt;/ul&gt;</code>标记用于定义无序列表,<code>&lt;li&gt;&lt;/li&gt;</code>标记嵌套在<code>&lt;ul&gt;&lt;/ul&gt;</code>标记中,用于描述具体的列表项,每对<code>&lt;ul&gt;&lt;/ul&gt;</code>中至少包含一对<code>&lt;li&gt;&lt;/li&gt;</code>.</p>
<blockquote>
<p>注意:<br>不赞成使用无序列表的type属性,一般通过CSS样式属性替代.</p>
</blockquote>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span>之间相当于一个容器，可以容纳所有元素。但是<span class="tag">&lt;<span class="name">ul</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span>中只能嵌套<span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span>，直接在<span class="tag">&lt;<span class="name">ul</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span>标记中输入文字的做法是不被允许的。</span><br></pre></td></tr></table></figure>
<h4 id="有序列表"><a href="#有序列表" class="headerlink" title="有序列表"></a>有序列表</h4><p>有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,其基本语法格式如下:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ol</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>有序列表项1<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>有序列表项2<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">li</span>&gt;</span>有序列表项3<span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ol</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>语法结构和无序列表一样.在有序列表中,除了<code>type</code>属性之外,还可以为<code>&lt;ol&gt;</code>定义<code>value</code>属性,为<code>&lt;li&gt;</code>定义value属性,他们决定有序列表的项目符号.<br>注意:<br>各个浏览器对有序列表的<code>type</code>和<code>value</code>属性的解析不同.<br>不赞成使用<code>&lt;ol&gt;&lt;li&gt;</code>的<code>type</code>.<code>start</code>和<code>value</code>属性,可通过CSS样式替代.</p>
</blockquote>
<h4 id="定义列表dl"><a href="#定义列表dl" class="headerlink" title="定义列表dl"></a>定义列表dl</h4><p>定义列表常用于对术语或者名词进行解释和描述,定义的列表项前没有任何项目符号,其基本语法结构如下:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dt</span>&gt;</span>名词3<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释1<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">dd</span>&gt;</span>解释2<span class="tag">&lt;/<span class="name">dd</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h4 id="三种列表表现形式"><a href="#三种列表表现形式" class="headerlink" title="三种列表表现形式"></a>三种列表表现形式</h4><p><img src="http://asssets.qipo.net/2017-08-14%2021-22-22%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png" alt></p>
<h3 id="表格"><a href="#表格" class="headerlink" title="表格"></a>表格</h3><p>在HTML网页中,想要创建表格,就需要使用表格相关的标签,创建标签的语法结构如下:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">tabel</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>性别<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>王某<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">td</span>&gt;</span>男<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br></pre></td></tr></table></figure>
<blockquote>
<p>在上面的语法中包含三对HTML标签,分别是<code>table</code>.<code>tr</code>.<code>td</code>,他们是创建表格的基本标签,缺一不可,下面对他们进行具体的解释:<br><code>&lt;table&gt;&lt;/table&gt;</code>:用于定义一个表格.<br><code>&lt;tr&gt;&lt;/tr&gt;</code>:用于定义表格中的一行,必须嵌套在<code>&lt;table&gt;&lt;/table&gt;</code>标签中,在<code>&lt;table&gt;&lt;/table&gt;</code>中包含几对<code>&lt;tr&gt;&lt;/tr&gt;</code>,就有几行表格.<br><code>&lt;td&gt;&lt;/td&gt;</code>:用于定义表格中的单元格,必须嵌套在<code>&lt;tr&gt;&lt;/tr&gt;</code>标签中,一对<code>&lt;tr&gt;&lt;/tr&gt;</code>中包含几对<code>&lt;td&gt;&lt;/td&gt;</code>,就表示该行中有多少列(或多少单元格)<br>注意!!!!<br>学习表格的核心是学习<code>&lt;td&gt;&lt;/td&gt;</code>标签,他就像一个容器,可以容纳所有元素,<code>&lt;td&gt;&lt;/td&gt;</code>中甚至可以再嵌套<code>&lt;table&gt;&lt;/table&gt;</code>.但是<code>&lt;tr&gt;&lt;/tr&gt;</code>中只能嵌套<code>&lt;td&gt;&lt;/td&gt;</code>,直接在<code>&lt;tr&gt;&lt;/tr&gt;</code>标签中输入文字的做法是不被允许的.</p>
</blockquote>
<h4 id="table标签的属性"><a href="#table标签的属性" class="headerlink" title="table标签的属性"></a>table标签的属性</h4><p><img src="http://assets.qipo.net/table.jpg" alt></p>
<h4 id="caption标签"><a href="#caption标签" class="headerlink" title="caption标签"></a>caption标签</h4><p><code>caption</code>标签必须紧跟着<code>table</code>标签之后.你只能对每个表格定义一个标题.通常这个标题会被居中于表格之上.</p>
<h4 id="th标签"><a href="#th标签" class="headerlink" title="th标签"></a>th标签</h4><p>表头一般位于表格的第一行或第一列,其文本加粗居中,如下所示,即为设置了表头的表格.设置表头非常简单,只需用表头标记<code>&lt;th&gt;&lt;/th&gt;</code>代替相应的单元格标记<code>&lt;td&gt;&lt;/td&gt;</code>即可.</p>
<p><img src="http://assets.qipo.net/th.png" alt></p>
<h4 id="表格结构"><a href="#表格结构" class="headerlink" title="表格结构"></a>表格结构</h4><p>在使用表格进行布局时,可以将表格分为头部.主体和页脚,具体如下:</p>
<blockquote>
<p><code>&lt;thead&gt;&lt;/thead&gt;</code>:用于定义表格的头部,必须位于<code>&lt;table&gt;&lt;/table&gt;</code>标记中.<br><code>&lt;tfoot&gt;&lt;/tfoot&gt;</code>:用于定义表格的页脚.<br><code>&lt;tbody&gt;&lt;/tbody&gt;</code>:用于定义表格的主体.</p>
</blockquote>
<h4 id="跨行跨列"><a href="#跨行跨列" class="headerlink" title="跨行跨列"></a>跨行跨列</h4><p>这里用到两个属性<code>rowspan</code>.<code>colspan</code>,他们都是<code>&lt;td&gt;</code>或<code>&lt;th&gt;</code>标签中的属性</p>
<blockquote>
<p><code>rowspan</code>此属性包含非负整数值，指示单元格扩展多少行。它的默认值是1.<br><code>colspan</code>此属性包含非负整数值，指示单元格扩展多少列。其默认值为1。高于1000的值将被视为不正确，并将被设置为默认值（1）</p>
</blockquote>
<p>实例:</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">head</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">title</span>&gt;</span>hello world<span class="tag">&lt;/<span class="name">title</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">head</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">border</span>=<span class="string">"1"</span> <span class="attr">cellspacing</span>=<span class="string">"0"</span> <span class="attr">cellpadding</span>=<span class="string">"20"</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>编号<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">th</span> <span class="attr">colspan</span>=<span class="string">"2"</span>&gt;</span>年龄<span class="tag">&lt;/<span class="name">th</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>1<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>王凯<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>24<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>25<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span> <span class="attr">rowspan</span>=<span class="string">"2"</span>&gt;</span>玉兔<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>fjdij<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>复旦复华<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>jdfij<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>发动机死回<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>房价地价<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">td</span>&gt;</span>低价覅设计<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p><img src="http://assets.qipo.net/2017-08-15%2019-13-36%E5%B1%8F%E5%B9%95%E6%88%AA%E5%9B%BE.png" alt></p>
<h3 id="当你在浏览器地址栏输入一个URL后回车，将会发生的事情？"><a href="#当你在浏览器地址栏输入一个URL后回车，将会发生的事情？" class="headerlink" title="当你在浏览器地址栏输入一个URL后回车，将会发生的事情？"></a>当你在浏览器地址栏输入一个URL后回车，将会发生的事情？</h3><ul>
<li>进行DNS解析，得到IP</li>
<li>三次握手，建立TCP连接</li>
<li>发送http请求（可能是一堆请求）</li>
<li>服务器响应（根据客户端的缓存情况，返回内容）</li>
<li>浏览器接收响应，根据接收内容进行渲染，显示</li>
</ul>

      
    </div>
    
    
    

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>打赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.jpg" alt="Key 微信支付">
        <p>微信支付</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="Key 支付宝">
        <p>支付宝</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/HTML/" rel="tag"># HTML</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/08/11/git-3/" rel="next" title="GIT 源码管理(3)">
                <i class="fa fa-chevron-left"></i> GIT 源码管理(3)
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/08/15/CSS/" rel="prev" title="CSS入门">
                CSS入门 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image" src="/images/avatar.jpg" alt="Key">
            
              <p class="site-author-name" itemprop="name">Key</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">107</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">12</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">28</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/keyarea" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:wxkayle@gmail.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#关于浏览器和服务器"><span class="nav-number">1.</span> <span class="nav-text">关于浏览器和服务器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#浏览器"><span class="nav-number">1.1.</span> <span class="nav-text">浏览器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#服务器"><span class="nav-number">1.2.</span> <span class="nav-text">服务器</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#浏览器与服务器之间的关系"><span class="nav-number">1.3.</span> <span class="nav-text">浏览器与服务器之间的关系</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#了解http协议"><span class="nav-number">2.</span> <span class="nav-text">了解http协议</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#初步认识HTML"><span class="nav-number">3.</span> <span class="nav-text">初步认识HTML</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML"><span class="nav-number">3.1.</span> <span class="nav-text">HTML</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#后缀名"><span class="nav-number">3.2.</span> <span class="nav-text">后缀名</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML的发展"><span class="nav-number">4.</span> <span class="nav-text">HTML的发展</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML结构"><span class="nav-number">5.</span> <span class="nav-text">HTML结构</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#了解格式中每个标签的含义"><span class="nav-number">6.</span> <span class="nav-text">了解格式中每个标签的含义</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML基础标签"><span class="nav-number">7.</span> <span class="nav-text">HTML基础标签</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#HTML中的注释方式"><span class="nav-number">7.1.</span> <span class="nav-text">HTML中的注释方式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常见标签学习"><span class="nav-number">8.</span> <span class="nav-text">常见标签学习</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#图像标签img"><span class="nav-number">8.1.</span> <span class="nav-text">图像标签img</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#创建超链接"><span class="nav-number">8.2.</span> <span class="nav-text">创建超链接</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#锚点链接"><span class="nav-number">8.2.1.</span> <span class="nav-text">锚点链接</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#空链接跳转"><span class="nav-number">8.2.2.</span> <span class="nav-text">空链接跳转</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML特殊字符"><span class="nav-number">9.</span> <span class="nav-text">HTML特殊字符</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#列表"><span class="nav-number">10.</span> <span class="nav-text">列表</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#无序列表"><span class="nav-number">10.1.</span> <span class="nav-text">无序列表</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#有序列表"><span class="nav-number">10.2.</span> <span class="nav-text">有序列表</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#定义列表dl"><span class="nav-number">10.3.</span> <span class="nav-text">定义列表dl</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#三种列表表现形式"><span class="nav-number">10.4.</span> <span class="nav-text">三种列表表现形式</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#表格"><span class="nav-number">11.</span> <span class="nav-text">表格</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#table标签的属性"><span class="nav-number">11.1.</span> <span class="nav-text">table标签的属性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#caption标签"><span class="nav-number">11.2.</span> <span class="nav-text">caption标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#th标签"><span class="nav-number">11.3.</span> <span class="nav-text">th标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#表格结构"><span class="nav-number">11.4.</span> <span class="nav-text">表格结构</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#跨行跨列"><span class="nav-number">11.5.</span> <span class="nav-text">跨行跨列</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#当你在浏览器地址栏输入一个URL后回车，将会发生的事情？"><span class="nav-number">12.</span> <span class="nav-text">当你在浏览器地址栏输入一个URL后回车，将会发生的事情？</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; 2018 &mdash; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-snowflake-o"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Key</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">190.8k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  


  











  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  

  
  
    <script type="text/javascript" src="/lib/canvas-nest/canvas-nest.min.js"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  












  





  

  

  

  
  

  

  

  

</body>
</html>
